<template>
  <div>
    <h1>角色管理</h1>
    <br>
    <el-row>
      <el-table :data="goodsList" stripe>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="removeItem(scope.row)">删除角色</el-button>
            <el-button type="primary" @click="queryPower(scope.row)">查看角色权限</el-button>
            <!--                                                 查看角色权限-->
            <el-dialog v-model="addPopup" title="查看角色信息" width="36%">
              <el-form :model="userForm" ref="userForm" :rules="rules" class="">
                <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
                <!--label 表单的描述-->
                <el-form-item label="角色">
                  {{ userForm.roleName }}
                </el-form-item>


                拥有权限： <span v-for="item in lesson"
                                :key="item.powerId"

              >{{ item.powerName }}&nbsp&nbsp</span><br>

                <span class="dialog-footer">

          <el-button type="primary" @click="determine()">确定</el-button>
        </span>
              </el-form>
            </el-dialog>


            <el-button type="primary" @click="updatePowerByRole(scope.row)">修改角色权限</el-button>

            <el-dialog v-model="updatePower" title="修改角色权限" width="36%">
              <el-form :model="powerForm" ref="userForm" :rules="rules" class="">
                <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
                <!--label 表单的描述-->
                <el-form-item label="角色">
                  {{ powerForm.roleName }}
                </el-form-item>

                <el-form-item label="当前权限" prop="currentRole">
                  <el-checkbox-group v-model="powerForm.haveRoles">
                    <el-checkbox v-for="item in powerArray"
                                 :key="item.roleId"
                                 :label="item.powerName"
                                 :value="item.powerName"></el-checkbox>

                  </el-checkbox-group>
                </el-form-item>

                <span class="dialog-footer">

          <el-button type="primary" @click="determineUpdate()">确定</el-button>

                </span>
              </el-form>
            </el-dialog>


          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize"
                     background :total="total" @current-change="changeCurPage()"></el-pagination>
    </el-row>
    <br>
    <el-button type="primary" @click="addRolePower()">添加新角色</el-button>

    <el-dialog v-model="addRole" title="添加角色权限" width="36%">
      <el-form :model="addForm" ref="userForm" :rules="rules" class="">
        <!--<el-form-item 表单中的每一行，由框架底层提供样式布局>-->
        <!--label 表单的描述-->
        <el-form-item label="角色">
          <el-input v-model="addForm.roleName" type="text" style="width: 100px"></el-input>

        </el-form-item>

        <el-form-item label="当前权限" prop="currentRole">
          <el-checkbox-group v-model="addForm.haveRoles">
            <el-checkbox v-for="item in roleArray"
                         :key="item.roleId"
                         :label="item.powerName"
                         :value="item.powerName"></el-checkbox>

          </el-checkbox-group>
        </el-form-item>

        <span class="dialog-footer">

          <el-button type="primary" @click="determineAdd()">确定</el-button>

                </span>
      </el-form>
    </el-dialog>


    <br><br>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "RoleManagement",
  created() {
    this.queryRoleAll()

  },
  data() {
    return {
      goodsList: [],
      supplier: {},
      addPopup: false,
      updatePower: false,
      userForm: {
        roleName: ''
      },
      lesson: [],
      powerForm: {
        roleName: '',
        haveRoles: []

      },
      powerArray: [],
      addRole: false,
      addForm: {
        roleName: '',
        haveRoles: []
      },
      roleArray: []
    }

  }, methods: {
    /**
     * 查询角色
     */
    queryRoleAll() {
      axios.post("/api/role/queryRoleAll", null).then(res => {
        this.goodsList = res.data;
      })


    },
    /**
     * 点击查看用户权限
     * @param scope
     */
    queryPower(scope) {
      this.addPopup = true
      this.userForm = scope
      axios.post("/api/role/queryPower", scope).then(res => {
        this.lesson = res.data


      })


    },

    determine() {
      this.addPopup = false
    },
    /**
     * 点击修改权限
     * @param scope
     */
    updatePowerByRole(scope) {
      this.updatePower = true;
      this.powerForm = scope

      axios.post("/api/power/queryPowerAllByRole", null).then(res => {

        this.powerArray = res.data
      })
      axios.post("/api/power/queryPowerAllByRoleId", scope).then(res => {

        this.powerForm.haveRoles = res.data
      })


    },
    /**
     * 点击确定修改权限
     */
    determineUpdate() {
      console.log(this.powerForm)
      axios.post("/api/power/UpdatePowerAllByRoleId", this.powerForm).then(res => {
        this.updatePower = false;
        ElMessage({
          message: '修改成功',
          type: 'success'
        })

      })


    },
    /**
     * 点击添加角色
     */
    addRolePower() {
      this.addRole = true
      axios.post("/api/power/queryPowerAllByRole", null).then(res => {

        this.roleArray = res.data
      })

    },
    /**
     * 点击确定后添加
     */
    determineAdd() {

      if (this.addForm.roleName != null && this.addForm.haveRoles.length>0) {
        axios.post("/api/role/addRolePower", this.addForm).then(res => {
          this.addRole = false
          ElMessage({
            message: '添加成功',
            type: 'success'
          })
          this.addForm = {}
          this.queryRoleAll()
        })
      }else {
        ElMessage({
          message: '请填写角色和选择权限',
          type: 'success'
        })
      }


    },
    removeItem(scope){
      axios.post("/api/role/removeRolePower", scope).then(res => {
        this.queryRoleAll()


      })
    }

  }
}
</script>

<style scoped>

</style>